<template>
  <div class="main evaluation-list">
    <section>
      <div class="filter-container">
        <el-select v-model="listQuery.status" class="filter-item" placeholder="筛选状态" clearable v-show="activeName==='second'">
          <el-option :key="0" label="待审核" :value="0"></el-option>
          <el-option :key="1" label="审核成功" :value="1"></el-option>
          <el-option :key="2" label="审核失败" :value="2"></el-option>
          <el-option :key="3" label="已退款" :value="3"></el-option>
        </el-select>
        <el-input @keyup.enter.native="search" class="filter-item" placeholder="订单号" v-model="listQuery.orderNo" clearable style="width: 250px"></el-input>
        <el-input @keyup.enter.native="search" class="filter-item" placeholder="手机号" v-model="listQuery.mobile" clearable></el-input>
        <el-input @keyup.enter.native="search" class="filter-item" placeholder="评价内容" v-model="listQuery.commentContent" clearable></el-input>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div class="btn-block">
        <el-button v-if="rightsButtons['batchExamine']" type="primary" @click="handleExamine(2, '')" plain>批量审核</el-button>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="`待审评价（${tobeTotal}）`" name="first">
          <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row @select-all="handleSelect" @select="handleSelect">
            <el-table-column align="center" type="selection" width="65"></el-table-column>
            <el-table-column align="center" label="订单号" prop="orderNo" width="150"></el-table-column>
            <el-table-column align="left" label="商品标题">
              <template slot-scope="scope">
                <div class="goods-box">
                  <viewer :images="[scope.row.goodsImage]" v-if="scope.row.goodsImage">
                    <img class="img" v-for="(item) in [scope.row.goodsImage]" :src="item" :key="item+Math.random()">
                  </viewer>
                  <div>
                    <p class="text-ellipsis">{{scope.row.goodsName}}</p>
                    <p class="text-ellipsis">{{scope.row.goodsSku}}</p>
                  </div>
                  <p><span v-show="scope.row.goodsNum">x</span>{{scope.row.goodsNum}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="评价内容">
              <template slot-scope="scope">
                <p>{{scope.row.commentContent}}</p>
                <div class="goods-box">
                  <template v-if="scope.row.commentVideo">
                    <video :src="item" loop="loop" controls width="100" height="100" v-for="(item, index) in (scope.row.commentVideo).split(',')" class="img" :key="index">
                      <source :src="item"  type="video/mp4">
                      <source :src="item" type="video/ogg">
                      <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                    </video>
                  </template>
                  <template v-if="scope.row.commentImg">
                    <viewer :images="(scope.row.commentImg).split(',')">
                      <img :src="item" alt="评价图片" v-for="(item, index) in (scope.row.commentImg).split(',')" :key="index" class="img">
                    </viewer>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="评价人" width="120" prop="nickname"></el-table-column>
            <el-table-column align="center" label="评价时间" width="150" prop="createdAt"></el-table-column>
            <el-table-column align="center" label="审核状态" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.status===0?'待审核':scope.row.status===1?'审核成功':scope.row.status===2?'审核失败':'已退款'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="90" v-if="rightsButtons['examine']">
              <template slot-scope="scope">
                <el-button v-if="rightsButtons['examine']" type="success" size="mini" plain @click="handleExamine(1, scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container" v-if="total > 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.pageNo"
              :page-sizes="[10, 20]"
              :page-size="listQuery.pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="全部评价" name="second">
          <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row @select-all="handleSelect" @select="handleSelect">
            <el-table-column align="center" type="selection" width="65"></el-table-column>
            <el-table-column align="center" label="订单号" prop="orderNo" width="150"></el-table-column>
            <el-table-column align="left" label="商品标题">
              <template slot-scope="scope">
                <div class="goods-box">
                  <viewer :images="[scope.row.goodsImage]" v-if="scope.row.goodsImage">
                    <img class="img" v-for="(item) in [scope.row.goodsImage]" :src="item" :key="item+Math.random()">
                  </viewer>
                  <div>
                    <p class="text-ellipsis">{{scope.row.goodsName}}</p>
                    <p class="text-ellipsis">{{scope.row.goodsSku}}</p>
                  </div>
                  <p><span v-show="scope.row.goodsNum">x</span>{{scope.row.goodsNum}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="评价内容">
              <template slot-scope="scope">
                <p>{{scope.row.commentContent}}</p>
                <div class="goods-box">
                  <template v-if="scope.row.commentVideo">
                    <video :src="item" loop="loop" controls width="100" height="100" v-for="(item, index) in (scope.row.commentVideo).split(',')" class="img" :key="index">
                      <source :src="item"  type="video/mp4">
                      <source :src="item" type="video/ogg">
                      <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                    </video>
                  </template>
                  <template v-if="scope.row.commentImg">
                    <viewer :images="(scope.row.commentImg).split(',')">
                      <img :src="item" alt="评价图片" v-for="(item) in (scope.row.commentImg).split(',')" :key="item+Math.random()" class="img">
                    </viewer>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="评价人" width="120" prop="nickname"></el-table-column>
            <el-table-column align="center" label="评价时间" width="150" prop="createdAt"></el-table-column>
            <el-table-column align="center" label="审核状态" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.status===0?'待审核':scope.row.status===1?'审核成功':scope.row.status===2?'审核失败':'已退款'}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['examine']">
              <template slot-scope="scope">
                <el-button v-if="rightsButtons['examine']&&scope.row.status!==3" type="success" size="mini" plain @click="handleExamine(1, scope.row)">{{scope.row.status===0?'审核':'修改'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container" v-if="total > 0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.pageNo"
              :page-sizes="[10, 20]"
              :page-size="listQuery.pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
    <el-dialog title="评价审核" :visible.sync="dialogExamine" width="60%" class="dialog-examine" @close="handleClose">
      <el-form :model="examineForm" ref="examineForm" label-width="100px">
        <template v-if="examineType===1">
          <el-form-item label="评价内容：">
            <p>{{examineForm.commentContent}}</p>
            <div class="goods-box">
              <template v-if="examineForm.commentVideo">
                <video :src="item" loop="loop" controls width="100" height="100" v-for="(item, index) in (examineForm.commentVideo).split(',')" class="img" :key="index">
                  <source :src="item"  type="video/mp4">
                  <source :src="item" type="video/ogg">
                  <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                </video>
              </template>
              <template v-if="examineForm.commentImg">
                <viewer :images="(examineForm.commentImg).split(',')">
                  <img :src="item" alt="评价图片" v-for="(item) in (examineForm.commentImg).split(',')" :key="item+Math.random()" class="img">
                </viewer>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="评价分数：">
            <span>描述{{examineForm.goodsScore===10?'1':examineForm.goodsScore===20?'2':examineForm.goodsScore===30?'3':examineForm.goodsScore===40?'4':'5'}}星,服务{{examineForm.serviceScore===10?'1':examineForm.serviceScore===20?'2':examineForm.serviceScore===30?'3':examineForm.serviceScore===40?'4':'5'}}星,物流{{examineForm.logisticsScore===10?'1':examineForm.logisticsScore===20?'2':examineForm.logisticsScore===30?'3':examineForm.logisticsScore===40?'4':'5'}}星</span>
          </el-form-item>
          <el-form-item label="评价人：">
            <span>{{examineForm.nickname}}</span>
          </el-form-item>
          <el-form-item label="评价日期：">
            <span>{{examineForm.createdAt}}</span>
          </el-form-item>
          <el-form-item label="商品标题：">
            <div class="goods-box">
              <viewer :images="[examineForm.goodsImage]" v-if="examineForm.goodsImage">
                <img class="img" v-for="(item) in [examineForm.goodsImage]" :src="item" :key="item+Math.random()">
              </viewer>
              <div>
                <p class="text-ellipsis">{{examineForm.goodsName}}</p>
                <p class="text-ellipsis">{{examineForm.goodsSku}}</p>
              </div>
            </div>
          </el-form-item>
        </template>
        <template v-else>
          <h2 class="title">评价内容</h2>
          <div class="evaluate" v-for="(i, idx) in evaluateList" :key="idx">
            <div class="content">
              <p>{{i.commentContent}}</p>
              <div class="goods-box">
                <template v-if="i.commentVideo">
                  <video :src="item" loop="loop" controls width="100" height="100" v-for="(item, index) in (i.commentVideo).split(',')" class="img" :key="index">
                    <source :src="item"  type="video/mp4">
                    <source :src="item" type="video/ogg">
                    <center>你的浏览器不支持这种格式的视频播放，请换个浏览器试试</center>
                  </video>
                </template>
                <template v-if="i.commentImg">
                  <viewer :images="(i.commentImg).split(',')">
                    <img :src="item" alt="评价图片" v-for="(item) in (i.commentImg).split(',')" :key="item+Math.random()" class="img">
                  </viewer>
                </template>
              </div>
            </div>
            <i class="el-icon-circle-close red-close" @click="delEvaluate(idx)"></i>
          </div>
        </template>
        <el-form-item label="备注：" :rules="commonRules.notNullRule" prop="remark">
          <el-input type="textarea" :rows="3" v-model="examineForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="examineSure(1)">审核通过</el-button>
        <el-button @click="examineSure(2)">审核驳回</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "evaluation",
  data() {
    return {
      tobeTotal: 0, // 待评价条数
      examineType: 1, // 1审核 2批量审核
      examineForm: {
        remark: ''
      },
      evaluateList: [],
      dialogExamine: false,
      activeName: 'first',
      list: [],
      listQuery: {
        status: 0,
        orderNo:'',
        commentContent:'',
        mobile: '',
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      listLoading: false,
      ids: []
    }
  },
  created () {
    if (this.$store.getters.cachedViews.length === 0) {
      this.getList()
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    // 弹框取消操作
    handleCancel () {
      this.dialogExamine = false
      if (this.examineType === 2) this.getList()
    },
    // 处理弹窗关闭
    handleClose () {
      this.$nextTick(()=>{
        this.$refs.examineForm.clearValidate()
      })
    },
    // 批量审核删除评价内容
    delEvaluate (index) {
      this.ids.splice(index, 1)
      this.evaluateList.splice(index, 1)
    },
    // 批量审核 复选框change
    handleSelect (selection) {
      this.ids = []
      this.evaluateList = []
      selection.map((item) => {
        this.ids.push(item.id)
        this.evaluateList.push({
          commentContent: item.commentContent,
          commentImg: item.commentImg,
          commentVideo: item.commentVideo
        })
      })
    },
    // 审核通过
    examineSure (type) {
      if (this.ids.length === 0 && this.examineType === 2) {
        this.$message.error('没有商品评价需要审核')
        return
      }
      this.$refs.examineForm.validate((valid) => {
        if (valid) {
          this.request({
            url: '/bsnl-trade-center/order-comment/operatorComment',
            method: 'post',
            data: {
              ids: this.examineType===1?[this.examineForm.id]:this.ids,
              operatorType: type,
              remark: this.examineForm.remark
            }
          }).then((res) => {
            if (res.status === 200) {
              this.$message.success(`${type===1?'审核':'驳回'}成功`)
              this.dialogExamine= false
              this.getList()
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    // tab切换
    handleClick (tab) {
      this.activeName = tab.name
      if (tab.name === 'first') {
        this.listQuery.status = 0
      } else {
        this.listQuery.status = ''
      }
      this.getList()
    },
    // 审核
    handleExamine (type, row) {
      this.examineType = type // 1审核 2批量审核
      if (type === 1) {
        this.examineForm = Object.assign({}, row)
      } else {
        this.examineForm = {}
      }
      if (type === 2 && this.ids.length === 0) {
        this.$message.error('请先勾选商品评价')
        return
      }
      this.dialogExamine = true
      this.$nextTick(()=>{
        this.$refs.examineForm.clearValidate()
      })
    },
    // 获取列表
    getList () {
      this.listLoading = true
      this.request({
        url: "/bsnl-trade-center/order-comment/list",
        method: 'get',
        params: this.listQuery
      }).then(({ data }) => {
        this.list = data.list
        this.total = data.total
        if (this.listQuery.status === 0) this.tobeTotal = data.total
        this.listLoading = false
      }).catch(err => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    // 搜索
    search () {
      this.listQuery.pageNo = 1
      this.getList()
    },
    // 切换分页
    handleCurrentChange (page) {
      this.listQuery.pageNo = page
      this.getList()
    },
    // 切换每页条数
    handleSizeChange (value) {
      this.listQuery.pageSize = value
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-box {
  display: flex;
  align-items: center;
}
.img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  cursor: pointer;
}
.text-style {
  line-height: 1.12;
  white-space: normal;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 270px;
}
.red-close {
  color: red;
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
}
.dialog-examine {
  .title {
    color: #999;
  }
  .evaluate {
    display: flex;
    margin: 10px 0;
    .content {
      flex: 0 0 90%
    }
  }
}
</style>
